@@include('header.htm', {
  "title": "Alert - Sleek Admin Dashboard Template",

	"vector_map": "",

	"date_range_picker": "",

	"select2": "",

	"ladda": "",

	"toastr": "",

	"flag_icon": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",

	"data_table": "",

	"responsive_data_table": "",

	"expendable_data_table": ""
})

@@include('sidebar.htm', {
	"parent": "components",
	"sub_parent": "components",
	"active": "alert"
})

@@include('top-bar.htm')




<div class="breadcrumb-wrapper">
	<h1>Alerts</h1>

		@@include('breadcrumb.htm', {
			"parent": "components",
			"sub_parent": "components",
			"active": "alert"
		})
</div>

<div class="card card-default">
	<div class="card-header card-header-border-bottom">
		<h2>Default Alerts</h2>
	</div>

	<div class="card-body">
		<div class="row">
			<div class="col-12">
				<p class="mb-5">Alerts provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/alerts/" target="_blank"> more details.</a></p>
			</div>

			<div class="col-lg-6">
				<label for="primary">primary alerts</label>
				<div class="alert alert-primary" role="alert">
					This is a primary alert—check it out!
				</div>

				<label for="secondary">secondary alerts</label>
				<div class="alert alert-secondary" role="alert">
					This is a secondary alert—check it out!
				</div>

				<label for="success">success alerts</label>
				<div class="alert alert-success" role="alert">
					This is a success alert—check it out!
				</div>

				<label for="danger">danger alerts</label>
				<div class="alert alert-danger" role="alert">
					A simple danger alert—check it out!
				</div>
			</div>

			<div class="col-lg-6">
				<label for="warning">warning alerts</label>
				<div class="alert alert-warning" role="alert">
					This is a warning alert—check it out!
				</div>

				<label for="info">info alerts</label>
				<div class="alert alert-info" role="alert">
					This is a info alert—check it out!
				</div>

				<label for="light">light alerts</label>
				<div class="alert alert-light" role="alert">
					This is a light alert—check it out!
				</div>
				<label for="dark">dark alerts</label>
				<div class="alert alert-dark" role="alert">
					This is a dark alert—check it out!
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Icon Alert -->
<div class="card card-default">
	<div class="card-header card-header-border-bottom">
		<h2>Icon Alerts</h2>
	</div>

	<div class="card-body">
		<div class="row">
			<div class="col-12">
				<p class="mb-5"> For icon alert add <code> &lt;i class="mdi mdi-alert mr-1"&gt;&lt;/i&gt; </code> inside <code> &lt; div class="alert" role="alert"&gt; </code>. Get classes for material icon <a href="material-icon.html">here</a>.
				</p>
			</div>

			<div class="col-lg-6">
				<label for="primary">primary alerts</label>
				<div class="alert alert-primary" role="alert">
					<i class="mdi mdi-alert mr-1"></i> This is a primary alert—check it out!
				</div>

				<label for="secondary">secondary alerts</label>
				<div class="alert alert-secondary" role="alert">
					<i class="mdi mdi-alert mr-1"></i> This is a secondary alert—check it out!
				</div>

				<label for="success">success alerts</label>
				<div class="alert alert-success" role="alert">
					<i class="mdi mdi-alert mr-1"></i> This is a success alert—check it out!
				</div>

				<label for="danger">danger alerts</label>
				<div class="alert alert-danger" role="alert">
					<i class="mdi mdi-alert mr-1"></i> This is a danger alert—check it out!
				</div>
			</div>

			<div class="col-lg-6">
				<label for="warning">warning alerts</label>
				<div class="alert alert-warning" role="alert">
					<i class="mdi mdi-alert mr-1"></i> This is a warning alert—check it out!
				</div>

				<label for="info">info alerts</label>
				<div class="alert alert-info" role="alert">
					<i class="mdi mdi-alert mr-1"></i> This is a info alert—check it out!
				</div>

				<label for="light">light alerts</label>
				<div class="alert alert-light" role="alert">
					<i class="mdi mdi-alert mr-1"></i> This is a light alert—check it out!
				</div>

				<label for="dark">dark alerts</label>
				<div class="alert alert-dark" role="alert">
					<i class="mdi mdi-alert mr-1"></i> This is a dark alert—check it out!
				</div>
			</div>
		</div>
	</div>
</div>


<!-- Dismisable alerts -->
<div class="card card-default">
	<div class="card-header card-header-border-bottom">
		<h2>Dismissible Alerts</h2>
	</div>

	<div class="card-body">
		<div class="row">
			<div class="col-12">
				<p class="mb-5">Alerts are available for any length of text, as well as an optional dismiss button. For proper
					styling, use one of the eight required contextual classes (e.g., <code>.alert-success</code> ).
					For inline dismissal, use the <a href="https://getbootstrap.com/docs/4.6/components/alerts/#dismissing" target="_blank">alerts jQuery plugin.</a></p>
			</div>

			<div class="col-lg-6">
				<label for="primary">primary alerts</label>
				<div class="alert alert-dismissible fade show alert-primary" role="alert">
					This is a primary alert—check it out!
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>

				<label for="secondary">secondary alerts</label>
				<div class="alert alert-dismissible fade show alert-secondary" role="alert">
					This is a secondary alert—check it out!
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>

				<label for="success">success alerts</label>
				<div class="alert alert-dismissible fade show alert-success" role="alert">
					This is a success alert—check it out!
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>

				<label for="danger">danger alerts</label>
				<div class="alert alert-dismissible fade show alert-danger" role="alert">
					This is a danger alert—check it out!
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
			</div>

			<div class="col-lg-6">
				<label for="warning">warning alerts</label>
				<div class="alert alert-dismissible fade show alert-warning" role="alert">
					This is a warning alert—check it out!
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>

				<label for="info">info alerts</label>
				<div class="alert alert-dismissible fade show alert-info" role="alert">
					This is a info alert—check it out!
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>

				<label for="light">light alerts</label>
				<div class="alert alert-dismissible fade show alert-light" role="alert">
					This is a light alert—check it out!
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>

				<label for="dark">dark alerts</label>
				<div class="alert alert-dismissible fade show alert-dark" role="alert">
					This is a dark alert—check it out!
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- highlighted alerts -->
<div class="card card-default">
	<div class="card-header card-header-border-bottom">
		<h2>Heightlighted Alerts</h2>
	</div>

	<div class="card-body">
		<div class="row">
			<div class="col-12">
				<p class="mb-5"> For Heightlighted Alert add class <code> .alert-highlighted </code> to <code> &lt;div class="alert" role="alert"&gt; </code>
				</p>
			</div>

			<div class="col-lg-6">
				<label for="primary">primary alerts</label>
				<div class="alert alert-primary alert-highlighted" role="alert">
					This is a primary alert—check it out!
				</div>

				<label for="secondary">secondary alerts</label>
				<div class="alert alert-secondary alert-highlighted" role="alert">
					This is a secondary alert—check it out!
				</div>

				<label for="success">success alerts</label>
				<div class="alert alert-success alert-highlighted" role="alert">
					This is a success alert—check it out!
				</div>

				<label for="danger">danger alerts</label>
				<div class="alert alert-danger alert-highlighted" role="alert">
					This is a danger alert—check it out!
				</div>
			</div>

			<div class="col-lg-6">
				<label for="warning">warning alerts</label>
				<div class="alert alert-warning alert-highlighted" role="alert">
					This is a warning alert—check it out!
				</div>

				<label for="info">info alerts</label>
				<div class="alert alert-info alert-highlighted" role="alert">
					This is a info alert—check it out!
				</div>

				<label for="light">light alerts</label>
				<div class="alert alert-light alert-highlighted" role="alert">
					This is a light alert—check it out!
				</div>

				<label for="dark">dark alerts</label>
				<div class="alert alert-dark alert-highlighted" role="alert">
					This is a dark alert—check it out!
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Outline Alerts -->
<div class="card card-default">
	<div class="card-header card-header-border-bottom">
		<h2>Dismissing Outline  Alerts</h2>
	</div>

	<div class="card-body">
		<div class="row">
			<div class="col-12">
				<p class="mb-5"> For outline Alert add class <code> .alert-outlined </code> to <code> &lt; div class="alert" role="alert"&gt; </code>
				</p>
			</div>

			<div class="col-lg-6">
				<label for="primary">primary alerts</label>
				<div class="alert alert-primary alert-outlined alert-dismissible fade show" role="alert">
					This is a primary alert—check it out!
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>

				<label for="secondary">secondary alerts</label>
				<div class="alert alert-secondary alert-outlined alert-dismissible fade show" role="alert">
					This is a secondary alert—check it out!
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>

				<label for="success">success alerts</label>
				<div class="alert alert-success alert-outlined alert-dismissible fade show" role="alert">
					This is a success alert—check it out!
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>

				<label for="danger">danger alerts</label>
				<div class="alert alert-danger alert-outlined alert-dismissible fade show" role="alert">
					This is a danger alert—check it out!
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
			</div>

			<div class="col-lg-6">
				<label for="warning">warning alerts</label>
				<div class="alert alert-warning alert-outlined alert-dismissible fade show" role="alert">
					This is a warning alert—check it out!
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>

				<label for="info">info alerts</label>
				<div class="alert alert-info alert-outlined alert-dismissible fade show" role="alert">
					This is a info alert—check it out!
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>

				<label for="light">light alerts</label>
				<div class="alert alert-light alert-outlined alert-dismissible fade show" role="alert">
					This is a light alert—check it out!
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>

				<label for="dark">dark alerts</label>
				<div class="alert alert-dark alert-outlined alert-dismissible fade show" role="alert">
					This is a dark alert—check it out!
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
			</div>
		</div>
	</div>
</div>




@@include('footer.htm', {

	"chart_js": "",
	"chartjs": "",

	"google_map": "",
	"mapjs": "",

	"vector_map": "",
	"vector_map_world_mill": "",
	"vector_map_js": "",
	
	"date_range_picker_moment": "",
	"date_range_picker": "",
	"date_range_js": "",

	"select2": "",

	"ladda_spin": "",
	"ladda": "",

	"jquery_mask": "",

	"toastr": "",

	"circle_progress": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",
	"full_calendar_js": "",

	"data_table": "",
	"data_table_bootstrap4": "",

	"responsive_data_table": ""
})
